import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link, } from "react-router-dom";
import { createForm } from 'rc-form';
import { Layout, Empty, Tag, Card, Icon, Button, Divider, message, Skeleton, Table } from "antd";
import { Calendar, WingBlank, WhiteSpace, List, InputItem, Flex, ActivityIndicator, Picker, PullToRefresh } from 'antd-mobile';
import {
    getDutyWeekInfoApi,
    getUpAndDownDeviceMessageApi
} from "../js/api.js";
import zhCN from 'antd-mobile/lib/calendar/locale/zh_CN';

import RViewerJS from 'viewerjs-react';
import '../css/dutyweekstatistic.css'
import md5 from 'md5';
import moment from 'moment';
import { iconFontUrl } from "../js/config.js";
import $ from 'jquery';
import { Progress } from 'antd';
const echarts = require('echarts');


class DutyWeekStatistics extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }




    render() {
        return (
            <Router basename="wechatupanddowndevice">
                <Layout style={{ backgroundColor: '#f5f5f5' }}>
                    <Layout.Content>
                        <Route path="/" component={WeChatUpAndDownDeviceMain} />
                    </Layout.Content>
                </Layout>
            </Router>
        );
    }
}

class WeChatUpAndDownDeviceMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            res:[],
            table1:[],
            table2:[],
            realDutyWeekNum:0,
            tableLoading:true,
            departmentId:undefined,
                date:undefined,
                wxId:undefined,
                realname:undefined,
                url:"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa3c085447f9faefa&" +
                "redirect_uri=https%3a%2f%2ftidukeji.cn%2finspectpush%2findex.html&response_type=code&" +
                "scope=snsapi_base&state=" + 13 + "," + "2021-12-01" + "," + "ri" + "#wechat_redirect"
        }

    }

    componentDidMount() {
        
        this.refreshData();
        
    }

    refreshData() {
        let urlData = this.getUrlParam("state").split(",");
        // let urlData = "13,2021-11-08,ri".split(",");
        let departmentId = urlData[0];
        let date = urlData[1];
        let wxId = urlData[2];
        this.setState({
            departmentId:departmentId,
            date:date
        })
        console.log(departmentId)
        console.log(date)
        
        getDutyWeekInfoApi(departmentId, date)
        .then((res)=>{
            console.log(res.data.realDutyWeekNum)
            console.log(res.data.questionList[0])
            let table1=[];
            let table2=[];
            res.data.allUserNameAndAttendNumber.forEach((item, index) => {
                table1.push(item);
            });
            res.data.deductionRankList.forEach((item, index) => {
                table2.push(item);
            });
            this.setState({
                res:res.data.questionList,
                realDutyWeekNum:res.data.realDutyWeekNum,
                table1:table1,
                table2:table2,
                
            })
            console.log(this.state.res.realname)
           
            this.drawChart();
        })
        
    }
    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        //var r = this.state.url.substr(1).match(reg);  //匹配目标参数
         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }
    drawChart(){
        
        var text="已完成："+this.state.realDutyWeekNum;
        var piechart = echarts.init(document.getElementById('pie_chart'))
        window.onresize = function() {
            piechart.resize()
        }
        var option ={
            
            color: [  "#0097FB"],
            graphic: {
                                  type: 'text',
                                  left: 'center',
                                  top: 'center',
                                  style: {
                                    text: text,
                                    fontSize:20,
                                    textAlign: 'center',
                                    fill: 'rgb(149,162,255)',
                                    width: 30,
                                    height: 30,
                                    
                                  }
                                  
                                },
            series: [
              {
                   
                name: "标签使用频率",
                type: "pie",
                radius: ["100%", "70%"],
                center: ["50%", "50%"],
                roseType: "radius",
                hoverAnimation:false,
                label: {
                  show: false
                },
                emphasis: {
                    
                  label: {
                    show: false
                  }
                },
                itemStyle: {
                  shadowBlur: 1,
                  shadowColor: 2,
                  shadowOffsetX: 5,
                  shadowOffsetY: 5
                },
                data:[21]
              }
            ]
          };
        piechart.setOption(option);
        window.onresize = piechart.resize;
    }
   

    

    render() {
        const colums=[{
            title:"姓名",
            dataIndex:"realname",
            key:"name",
            width: "50%",
            align: "center"
        }, {
            title:"巡查次数",
            dataIndex:"attendnumber",
            key:"attendnumber",
            width: "50%",
            align: "center"
        },
    ];
    const colums2=[{
        title:"巡查地点",
        dataIndex:"address",
        key:"address",
        width: "50%",
        align: "center"
    }, {
        title:"扣除分数",
        dataIndex:"deductionNum",
        key:"deductionNum",
        width: "50%",
        align: "center"
    },
]   

        let questList=this.state.res.map((item) => 
        <div >
            <div class='text'>值周人员：{item.realname}</div>
                <div class='text'>时间：{item.createTime}</div>
                <div class='text'>地点：{item.address}</div>
                
                <div class='text'>问题描述：<span>{item.content}</span></div>
                <div class='text'>扣分情况：<span>-{item.deduction}分</span></div>
                <div class='text'>巡查项目：{item.item}</div>
                <div class='text'>所属类别：{item.category}</div>
                {item.photo!=null?
                (<div class='text'>现场照片：
                    <div class="card_image2">
                       <RViewerJS>

                       <img src={item.photo} width="300" height="350"></img>
                       </RViewerJS>
                    
                    

                    </div>
                </div>)
                :
                (<div></div>)}
                {item.video!=null ?(<div class='text' >现场视频：
                <div class="videos"><video src={"https://tidukeji.cn"+item.video} width="200" height="200" marginLeft="100" controls>
                    </video ></div>
                    </div>)
                    :
                    (<div></div>)}
        </div>
        
        )

        return (
            <div class="main-content">
                
                <div class='numTag'  >
                        
                        <div class='numTag-time'>
                            统计时间 : 
                            <span>{this.state.date}</span>
                        </div>
                </div>
        <div class="echart-content">
			<div class="echart-detail">
				<div class='echart-title'>
					1、今日完成值周巡查次数
				</div>
                <div id='pie_chart'>
            
                
            </div>
			</div>
            
			
		</div>
        <div class="table-content">
            <div class="echart-detail">
                <div class='echart-title2'>
                2、所有老师今日巡查次数
                </div>
                <div>
                    <Table
                    dataSource={this.state.table1}
                    columns={colums}
                    pagination={ false }
                    locale={{ emptyText: '暂无数据' }}
                     />
                </div>
            </div >
        </div>
        <div class="table-content">
            <div class="echart-detail">
                <div class='echart-title'>
                3、所有巡查地点今日扣分情况列表：
                </div>
                <div>
                    <Table
                    dataSource={this.state.table2}
                    columns={colums2}
                    pagination={ false }
                    locale={{ emptyText: '暂无数据' }}
                     />
                </div>
            </div >
        </div>
        <div class="table-content">
            <div class="echart-detail">
                <div class='echart-title'>
                4、所有老师今日巡查发现问题列表：
                </div>
                <div>
                    {this.state.res.length!=0 ? (<Card  title="问题列表" bordered={false} style={{ width: 350,
                                                                        backgroundColor: '#fff8f4',
                                                                        marginLeft:20,
                                                                        marginTop:20,
                                                                        marginBottom:30 }}>
                                                                        
                            {questList}
                           
                            </Card>)
                            :(
                                <Card title="问题列表" bordered={false} style={{ width: 350,
                                                                        
                                                                        marginLeft:20,
                                                                        marginTop:20 }}>
                                                                            <div>
                                                                                暂无数据
                                                                            </div>

                                </Card>
                            )}
                    
                </div>
            </div >
        </div>
            </div>
        )

    }
}




export default DutyWeekStatistics;

















